<template>
    <div class="page-content">
        <button @click="goBack" v-show="isShow">返回上一页</button>
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>
import getMapName from '../../public/getMapName'
export default {
    data() {
        return {
            myEcharts: null,
            isShow: false
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getdata()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        // this.getData()
        window.addEventListener('resize', this.screen)
    },
    methods: {
        goBack() {
            this.myEcharts.dispose()
            this.initEcharts()
            this.isShow = false
        },
        // 适配屏幕
        screen() {
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width = this.$refs.box.offdetWidth
            let num = width / 100 * 3
            let options = {
                textStyle: { //设置主标题样式
                    fontSize: num
                }
            }
            // 修改图标样式后重绘
            this.myEcharts.setOption(options)
        },
        async initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            // 绘制地图的数据（地图的经纬度）
            let mapData = await this.$http('http://localhost:8080/map/china.json')
            console.log(mapData)
            this.$echarts.registerMap('china', mapData.data)
            let dataList = await this.$http('/api/CropCoverage')
            console.log(dataList)
            let options = {
                title: {
                    text: '各地区农作物覆盖面积',
                    left: 10,
                    top: 10
                },
                tooltip: {
                    show: true
                },
                visualMap: {
                    show: true,
                    calculable: true,  //是否显示拖动手柄
                    max: 400,
                    min: 0,
                    color: ['#0F3357', '#36BFE5']
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        zoom: 1.2,  // 地图显示大小
                        data: dataList.data.content,
                        label: {
                            show: true
                        },
                        left: '15%',
                        right: '15%',
                        top: '10%',
                        bottom: '10%'
                    }
                ],
            }
            this.myEcharts.setOption(options)
            // 给地图绑定一个点击事件
            this.myEcharts.on('click', async (city) => {
                let cityName = getMapName(city.name)  //获取到的中文省份名称转换成拼音
                console.log(cityName)
                if (!cityName.name) { return }
                let cityList = await this.$http('http://localhost:8080' + cityName.path)
                this.$echarts.registerMap(cityName.name, cityList.data)
                let options = {
                    series: [
                        {
                            type: 'map',
                            map: cityName.name
                        }
                    ]
                }
                this.myEcharts.setOption(options)
                this.isShow = true
            })
        }
    },
    // async getData() {
    //     let dataList=await this.$http('/api/CropCoverage')
    //     this.setEcharts(dataList)
    // },
    // setEcharts(dataList){
    //     let options={
    //         series:[
    //             {
    //                 data:dataList.data.content
    //             }
    //         ]
    //     }
    //     this.myEcharts.setOption(options)
    // }


}
</script>
<style scoped>
button{
    width: 100px;
    height: 30px;
    color: white;
    position: absolute;
    top:10px;
    right:10px;
    z-index: 99999;
    background-color:coral;
    border: none;
}</style>